<template>
  <d2-container>
    <el-form >
      <el-form-item >
    <h2>教室名称：{{selectedClassroom.name}}</h2>
    <!-- <div>拖曳班级空闲时间</div> -->
    <!-- <div>先选择教室，再添加老师，教务老师到班级。 老师可以拖曳两次，第一次为教师，第二次为教务老师.   点击班级删除该班级排课，点击老师删除老师</div> -->
    <el-button type="primary" @click="classRoomSchedule" style="float:left">综合日程表</el-button>
    <el-button type="primary" @click="exportExcel" style="float:left">EXCEL导出</el-button>
    <el-button type="primary" @click="submit" style="float:right;margin-right: 20px">确认排课</el-button>
     <el-radio-group v-model="classStatus" style="float:right;margin-right: 50px" @change='changeClass'>
        <el-radio :label="-1" style='margin-top:10px'>待进行</el-radio>
        <el-radio :label="0">进行中</el-radio>
      </el-radio-group>
      </el-form-item>
    </el-form>
     <el-table :data="dayList" border style="width: 68%;display: inline-block;margin-right:1%;position: relative;" stripe="stripe" :row-style='{height:"5px"}' :cell-style='{padding:"5px 0"}' :height='700'>
      <el-table-column  prop='hour' label="时间/日期"></el-table-column>
      <el-table-column  label="周一">
        <template slot-scope="scope" >
        <div :data-id="0+'-'+(scope.$index * 7)"        
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin:0;">
<!--                   <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeClass($event)">{{day1[scope.$index].class == undefined ? '' :  '班级:' + day1[scope.$index].class.name}}</div>
          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeClassroom($event)">{{day1[scope.$index].class.classroom == undefined ? '' :  '教室:' + day1[scope.$index].class.classroom.name}}</div>

          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeTeacher($event)">{{day1[scope.$index].class.teacher == undefined ? '' :  '老师:' + day1[scope.$index].class.teacher.name}}</div>
          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeRegistrar($event)">{{day1[scope.$index].class.registrar == undefined ? '' :  '教务:' + day1[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7)" @click='empty($event)'>{{(day1[scope.$index].class == undefined)? '&nbsp;' : ''}}</div>
          <div v-for="(item, index2) in day1[scope.$index].class" :data-id="0+'-' + (scope.$index * 7) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day1[scope.$index].class.length+'%','left':index2 * 100/day1[scope.$index].class.length + '%'}" @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <!-- <p>{{item}}</p> -->
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周二">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 1)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeClass($event)">{{day2[scope.$index].class.class == undefined ? '' :  '班级:' + day2[scope.$index].class.name}}</div>
          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeClassroom($event)">{{day2[scope.$index].class.classroom == undefined ? '' :  '教室:' + day2[scope.$index].class.classroom.name}}</div>

          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeTeacher($event)">{{day2[scope.$index].class.teacher == undefined ? '' :  '老师:' + day2[scope.$index].class.teacher.name}}</div>
          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeRegistrar($event)">{{day2[scope.$index].class.registrar == undefined ? '' :  '教务:' + day2[scope.$index].class.registrar.name}}</div>-->
          <div :data-id="0+'-'+(scope.$index * 7 + 1)"  @click='empty($event)'>{{(day2[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day2[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day2[scope.$index].class.length+'%','left':index2 * 100/day2[scope.$index].class.length + '%'}"  @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <p :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
            <!-- {{item}} -->
          </div>
        </div> 
        </template>
      </el-table-column>
      <el-table-column  label="周三">
                <template slot-scope="scope">

        <div :data-id="0+'-'+ (scope.$index * 7 + 2)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                <!--   <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeClass($event)">{{day3[scope.$index].class == undefined ? '' :  '班级:' + day3[scope.$index].class.name}}</div>
          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeClassroom($event)">{{day3[scope.$index].class.classroom == undefined ? '' :  '教室:' + day3[scope.$index].class.classroom.name}}</div>

          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeTeacher($event)">{{day3[scope.$index].class.teacher == undefined ? '' :  '老师:' + day3[scope.$index].class.teacher.name}}</div>
          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeRegistrar($event)">{{day3[scope.$index].class.registrar == undefined ? '' :  '教务:' + day3[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 2)"  @click='empty($event)'>{{(day3[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day3[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day3[scope.$index].class.length+'%','left':index2 * 100/day3[scope.$index].class.length + '%'}"  @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <p :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周四">
                <template slot-scope="scope">

        <div :data-id="0+'-'+ (scope.$index * 7 + 3)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeClass($event)">{{day4[scope.$index].class == undefined ? '' :  '班级:' + day4[scope.$index].class.name}}</div>
          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeClassroom($event)">{{day4[scope.$index].class.classroom == undefined ? '' :  '教室:' + day4[scope.$index].class.classroom.name}}</div>

          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeTeacher($event)">{{day4[scope.$index].class.teacher == undefined ? '' :  '老师:' + day4[scope.$index].class.teacher.name}}</div>
          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeRegistrar($event)">{{day4[scope.$index].class.registrar == undefined ? '' :  '教务:' + day4[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 +3)"  @click='empty($event)'>{{(day4[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day4[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day4[scope.$index].class.length+'%','left':index2 * 100/day4[scope.$index].class.length + '%'} "  @click="removeClass($event)" style="position: absolute;top:0;z-index:1;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <p :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周五">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 4)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 +4)" @click="removeClass($event)">{{day5[scope.$index].class == undefined ? '' :  '班级:' + day5[scope.$index].class.name}}</div>
          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeClassroom($event)">{{day5[scope.$index].class.classroom == undefined ? '' :  '教室:' + day5[scope.$index].class.classroom.name}}</div>

          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeTeacher($event)">{{day5[scope.$index].class.teacher == undefined ? '' :  '老师:' + day5[scope.$index].class.teacher.name}}</div>
          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeRegistrar($event)">{{day5[scope.$index].class.registrar == undefined ? '' :  '教务:' + day5[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 4)"  @click='empty($event)'>{{(day5[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day5[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day5[scope.$index].class.length+'%','left':index2 * 100/day5[scope.$index].class.length + '%'}"  @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <p :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column label="周六">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 5)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                 <!--  <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 +5)" @click="removeClass($event)">{{day6[scope.$index].class == undefined ? '' :  '班级:' + day6[scope.$index].class.name}}</div>
          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeClassroom($event)">{{day6[scope.$index].class.classroom == undefined ? '' :  '教室:' + day6[scope.$index].class.classroom.name}}</div>

          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeTeacher($event)">{{day6[scope.$index].class.teacher == undefined ? '' :  '老师:' + day6[scope.$index].class.teacher.name}}</div>
          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeRegistrar($event)">{{day6[scope.$index].class.registrar == undefined ? '' :  '教务:' + day6[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 5)"  @click='empty($event)'>{{(day6[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day6[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day6[scope.$index].class.length+'%','left':index2 * 100/day6[scope.$index].class.length + '%'}"  @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;">
            <p :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column label="周日">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 +6)"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeClass($event)">{{day7[scope.$index].class == undefined ? '' :  '班级:' + day7[scope.$index].class.name}}</div>
          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeClassroom($event)">{{day7[scope.$index].class.classroom == undefined ? '' :  '教室:' + day7[scope.$index].class.classroom.name}}</div>

          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeTeacher($event)">{{day7[scope.$index].class.teacher == undefined ? '' :  '老师:' + day7[scope.$index].class.teacher.name}}</div>
          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeRegistrar($event)">{{day7[scope.$index].class.registrar == undefined ? '' :  '教务:' + day7[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 6)"  @click='empty($event)'>{{(day7[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day7[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" 
          :style="{'background-color': item.color,'height': item.course.duration+'00%','width':100/day7[scope.$index].class.length+'%','left':index2 * 100/day7[scope.$index].class.length + '%'}"  @click="removeClass($event)" style="position: absolute;top:0;left:0;z-index:1;width: 100%;line-height: 14px;text-align: center;padding:0;margin:0;" >
            <p :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" >{{item.course.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.teacher.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
    </el-table>
     <el-table :data="classList" border style="width: 10%;display: inline-block;display: inline-block;position: relative;vertical-align: top" stripe="stripe" :height='700'>
       <el-table-column   label="班级列表">
         <template slot-scope="scope" type="index">
          <div :data-id="1+'-'+scope.$index"
        :style="{'background-color': classList[scope.$index].color}"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)"
        >

      <div :data-id="1+'-'+scope.$index">{{classList[scope.$index].name}}</div>
      <div v-if="classList[scope.$index].teacher != undefined" :data-id="1+'-'+scope.$index"  @click="removeTeacher($event)">老师：{{classList[scope.$index].teacher.name}}</div>
      <div v-if="classList[scope.$index].registrar != undefined" :data-id="1+'-'+scope.$index" @click="removeRegistrar($event)">教务：{{classList[scope.$index].registrar.name}}</div>
      <!-- <div v-if="classList[scope.$index].classroom != undefined" :data-id="1+'-'+scope.$index" @click="removeClassroom($event)">教室：{{classList[scope.$index].classroom.name}}</div> -->
      <div  :data-id="1+'-'+scope.$index">课程：{{classList[scope.$index].course.name}}</div>
      <div :data-id="1+'-'+scope.$index">时长：{{classList[scope.$index].course.duration / 2}} 小时</div>

    </div>
        </template>
       </el-table-column>
     </el-table>

     <el-table :data="staffList" border style="width: 10%;display: inline-block;display: inline-block;position: relative;vertical-align: top" stripe="stripe" :height='700'>
       <el-table-column   label="老师/教务列表">
         <template slot-scope="scope">
          <div :data-id="2+'-'+scope.$index"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)">{{staffList[scope.$index].name}}</div>
        </template>
       </el-table-column>
     </el-table>
    
     <el-table :data="classroomList" border style="width: 10%;display: inline-block;position: relative;vertical-align: top" stripe="stripe" :height='700'>
       <el-table-column label="教室列表（点击切换教室）">
         <template slot-scope="scope">
          <div @click="changeClassroom(scope.row)" :style="classroomList[scope.$index]._id == selectedClassroom._id ? 'background:#A1D1FB' : ''" style='padding:10px'>{{classroomList[scope.$index].name}}</div>
        </template>
       </el-table-column>
     </el-table>

                 <el-dialog
                title="添加班级"
                :visible.sync="showAdd"
                width="50%">

            <template>
                <div >
                <el-table :data='classList'>
                      <el-table-column
                              label="班级名称">
                              <template slot-scope='scope'>
                                  <div >{{scope.row.name}}</div>
                              </template>
                                  
                      </el-table-column>
                    <el-table-column
                            label="老师">
                            <template slot-scope='scope'>
                                <div >{{scope.row.teacher != undefined ? scope.row.teacher.name : '无'}}</div>
                            </template>
                                
                    </el-table-column>
                    <el-table-column
                            label="教务">
                            <template slot-scope='scope'>
                                <div >{{scope.row.registrar != undefined ? scope.row.registrar.name : '无'}}</div>
                            </template>
                                
                    </el-table-column>
                    <el-table-column
                            label="课程">
                            <template slot-scope='scope'>
                                <div >{{scope.row.course.name}}</div>
                            </template>
                                
                    </el-table-column>
                    <el-table-column
                            label="时长（小时）">
                            <template slot-scope='scope'>
                                <div >{{scope.row.course.duration/2}}</div>
                            </template>
                                
                    </el-table-column>
                    <el-table-column
                            label="操作">
                            <template slot-scope='scope'>
                                <el-button @click='addClass(scope.row)'>添加</el-button>
                            </template>
                                
                    </el-table-column>

                  
                </el-table>
            
        </div>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showAdd = false">关闭</el-button>
            </span>
        </el-dialog>
  </d2-container>
</template>

<script>
import util from "@/libs/util.js";
import request from "@/plugin/axios";
import { mapState } from "vuex";
    import excel from "@/libs/util.excel"

// import Vue from 'vue';
// import pluginExport from '@d2-projects/vue-table-export';
// Vue.use(pluginExport);

export default {
  components: {
  },
  data() {
    return {
      startIndex: "",
      endIndex: "",
      dayList : [{hour:'8:00'},{hour:'8:30'},{hour:'9:00'},{hour:'9:30'},{hour:'10:00'},{hour:'10:30'},{hour:'11:00'},{hour:'11:30'},{hour:'12:00'},{hour:'12:30'},{hour:'13:00'},{hour:'13:30'},{hour:'14:00'},{hour:'14:30'},{hour:'15:00'},{hour:'15:30'},{hour:'16:00'},{hour:'16:30'},{hour:'17:00'},{hour:'17:30'},{hour:'18:00'},{hour:'18:30'},{hour:'19:00'},{hour:'19:30'},{hour:'20:00'}],
      day1 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day2 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day3 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day4 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day5 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day6 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day7 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      classroomList : [],
      staffList : [],
      classList:[],
      selectedClassroom:{},
      oindex : 16,
      color : ['#A1D1FB','#B0F8C4','#F8B0D7','#F8BDB0','#DDB0F8'],
      classStatus : -1,
      showAdd : false,
      thisDay : '',
      thisColumnIndex : undefined,
      thisHour : ''
      // testColor:[]
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"]),
  },
  methods: {
    getClassroomList() {
      let school = this.info.school.map(e => {
        return e._id;
      });
      request({
        url: "/classArrange/getClassroomList",
        method: "post",
        data: { school: school }
      }).then(res => {
        this.classroomList = res.data || []
        if ( this.classroomList.length == 0){
          this.$alert('教室列表为空','请先添加教室').then((value)=>{
            this.$router.push('/classroom-list')
          })
        }
        else{
          this.selectedClassroom = res.data[0]
        }
        
      });
    },
    getStaffList() {
      let school = this.info.school.map(e => {
        return e._id;
      });
      request({
        url: "/classArrange/getTeacherList",
        method: "post",
        data: { school: this.info.school[0]._id }
      }).then(res => {
        this.staffList = res.data;
        console.log(this.staffList,'sdsdss')
      });
    },
    getClassList(data) {
      let school = this.info.school.map(e => {
        return e._id;
      });
      let classroom = this.selectedClassroom._id
      request({
        url: "/classArrange/getClassList",
        method: "post",
        data: { school: school,classroom:classroom ,status:this.classStatus}
      }).then(res => {
          let alertmessage = ''

        // this.createColor(res.data.length)
        for (var i = 0 ; i<res.data.length;i++){ // class list 
          // res.data[i].color = 'rgb'+this.testColor[i]
          res.data[i].color = this.color[i%5]
            res.data[i].course.duration = (parseFloat(res.data[i].course.duration)) * 2
          // class -> hours -> [day:0,hours:[]]
          for (var j = 0 ; j < res.data[i].hours.length;j++){ // class hours day 0 - 6
            var dayname = 'day' + (res.data[i].hours[j].day == 0 ? 7 : res.data[i].hours[j].day)
         //   if ( i == 1){
         //   }
        // console.log(res.data[i].course,'resdata  ')
            const duration = res.data[i].course.duration // half an hour
            if (res.data[i].hours[j].hours != undefined){
            for (var t= 0 ; t < res.data[i].hours[j].hours.length;t++){ // class hours day j , time slots 
                let occupied = false
                let classname = ''
                let start = res.data[i].hours[j].hours[t].start - this.oindex
                let end = res.data[i].hours[j].hours[t].start - this.oindex + duration - 1
                let x = start
               while (x <= end){
                  if (this.$data[dayname][x].occupied){
                    occupied = true
                    x = end
                    console.log(this.$data[dayname][x],'ss')
                    classname = this.$data[dayname][x].classname
                  }
                  x += 1
                }
                if (occupied){
                  let thisdayname = '周'
                  if (res.data[i].hours[j].day == 0){
                    thisdayname += '日'
                  }
                  else if (res.data[i].hours[j].day == 1){
                    thisdayname += '一'
                  
                  }
                  else if (res.data[i].hours[j].day == 2){
                    thisdayname += '二'
                  
                  }
                  else if (res.data[i].hours[j].day == 3){
                    thisdayname += '三'
                  
                  }
                  else if (res.data[i].hours[j].day == 4){
                    thisdayname += '四'
                  
                  }
                  else if (res.data[i].hours[j].day == 5){
                    thisdayname += '五'
                  
                  }
                  else if (res.data[i].hours[j].day == 6){
                    thisdayname += '六'
                  
                  }
                  
                  if (alertmessage != ''){
                    alertmessage += '\n'
                  }
                  alertmessage += this.selectedClassroom.name + ': ' +  thisdayname + ' ' + res.data[i].name + '"和"' +  classname + '"时间冲突'
                }

if((res.data[i].classroom !=null) && (res.data[i].classroom._id == this.selectedClassroom._id)){
              for (var z = 0 ; z < duration;z++){ // duration check
              
                // this.$data[dayname].splice((res.data[i].hours[j].hours[t].start - this.oindex + z),z)
                // fill in dayx 
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class = res.data[i]
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].teacher = res.data[i].teacher
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].registrar = res.data[i].registrar
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].classroom = res.data[i].classroom
                if (this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z] != undefined){
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].occupied = true
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].classname = res.data[i].name
                }
                
                if (z == 0){
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].first = true
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].duration = duration
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].color = res.data[i].color
                  if (this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class == undefined){
                    this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class = [res.data[i]]
                  }
                  else{
                    this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class.push(res.data[i])
                  }
                }
                }
              }
            }
          }
          this.$data[dayname].push('')
          this.$data[dayname].splice( -1,1)
          }
        }
        this.classList = res.data

        if (alertmessage){
          this.$alert(alertmessage,'课程时间冲突')
        }
      });
    },
    changeClassroom(e){
      this.day1 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day2 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day3 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day4 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day5 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day6 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.day7 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      this.selectedClassroom = e
      this.getClassList()
    },

    changeClass(){
      
      this.day1 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day2 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day3 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day4 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day5 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day6 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.day7 = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      this.classList = []
      this.getClassList()
    },
    submit() {
      let classes = []
      for(let i = 0;i<7;i++){
        let name = 'day' + (i + 1)
        for(let j =0;j<this.$data[name].length;j++){
          let tempclass = {}
          if(this.$data[name][j].class!=undefined){
            // console.log(this.$data[name][j].class[0],'class')
            if(classes.length == 0){
                tempclass.classId = this.$data[name][j].class[0]._id
                tempclass.classRoomId = this.selectedClassroom._id
                if(this.$data[name][j].class[0].registrar != undefined){
                  tempclass.registrar = this.$data[name][j].class[0].registrar._id
                }
                if(this.$data[name][j].class[0].teacher != undefined){
                  tempclass.teacher = this.$data[name][j].class[0].teacher._id
                }
                tempclass.hours = [{day:i,hours:{start:j+this.oindex,end:j+this.$data[name][j].class[0].course.duration+this.oindex-1}}]
                classes.push(tempclass)
            }else{
              if(classes.map(e =>{return e.classId}).indexOf(this.$data[name][j].class[0]._id) == -1){
                  tempclass.classId = this.$data[name][j].class[0]._id
                  tempclass.classRoomId = this.selectedClassroom._id
                if(this.$data[name][j].class[0].registrar != undefined){
                  tempclass.registrar = this.$data[name][j].class[0].registrar._id
                }
                if(this.$data[name][j].class[0].teacher != undefined){
                  tempclass.teacher = this.$data[name][j].class[0].teacher._id
                }
                  tempclass.hours = [{day:i,hours:{start:j+this.oindex,end:j+this.$data[name][j].class[0].course.duration+this.oindex-1}}]
                  classes.push(tempclass)
              }else{
                classes[classes.map(e =>{return e.classId}).indexOf(this.$data[name][j].class[0]._id)].hours.push({day:i,hours:{start:j+this.oindex,end:j+this.$data[name][j].class[0].course.duration+this.oindex-1}})
              }
            }
          }
        }
      }
      request({
        url: "/classArrange/classArrange",
        method: "post",
        data: classes
      }).then(res => {
        if(res.code == 200){
          this.$message('提交成功')
        }
      });
    },
    onDragstart(event) {
      this.startIndex = event.target.getAttribute("data-id");
      // console.log(event,'start')
    },
    onDragend(event) {
      console.log(this.$data)
      let startGroupIndex = parseInt(this.startIndex.split("-")[0]);
      let startChildIndex = parseInt(this.startIndex.split("-")[1]);
      let endGroupIndex = parseInt(this.endIndex.split("-")[0]);
      let endChildIndex = parseInt(this.endIndex.split("-")[1]);
      if(startGroupIndex==0 && endGroupIndex !=0){
        return
      }else if(startGroupIndex == 0 && endGroupIndex == 0){//换时间

      }else if(startGroupIndex == 1 && endGroupIndex == 0){//排课
        if (this.selectedClassroom == {}){
          alert('请先选择教室')
          return
        }
        let rowindex = Math.floor(endChildIndex / 7)
        let columnindex = endChildIndex % 7
          if (this.classList[startChildIndex].teacher == undefined){
            alert('请先添加班级老师')
            return 
          }
          // if (this.classList[startChildIndex].registrar == undefined){
          //   alert('请先添加班级教务')
          //   return 
          // }

          let name = 'day' + (columnindex + 1)
          let theday = this.$data[name]
          let duration = this.classList[startChildIndex].course.duration
          // check if same classroom is used , same teacher 
          // console.log(theday,'dsadas') //theday[rowindex] -> which hour has classes
          if (theday[rowindex].class != undefined){
            if (theday[rowindex].class.map(function(e){return e.class != undefined ? e.class._id : ''}).indexOf(this.classList[startChildIndex]._id) != -1){
              alert('已经添加了这个课程')
              return 
            }
            var good = true
            for (var i = 0; i < duration;i++){
              if (theday[rowindex+i].occupied){
                good = false
              }
            }
            if (theday[rowindex].class.map(function(e){return e.teacher != undefined ? e.teacher._id : ''}).indexOf(this.classList[startChildIndex].teacher._id) != -1){
              alert('同一个老师不能同时多节课')
              return 
            }
          
            // if (theday[rowindex].class.map(function(e){return e.registrar != undefined ? e.registrar._id : ''}).indexOf(this.classList[startChildIndex].registrar._id) != -1){
            //   alert('同一个教务不能同时多节课')
            //   return 
            // }
          }
            for (var i = 0; i < duration;i++){
              if (theday[rowindex+i].occupied == true){
                alert('该时段教室已被占用')
                return
              }
            }
          if (this.$data[name][rowindex].class == undefined){
              this.$data[name][rowindex].class = [this.classList[startChildIndex]]
            }else{
              // this.$data[name][rowindex].class.push(this.classList[startChildIndex])
              alert('该时段教室已被占用')
              return
            }
              this.$data[name][rowindex].first = true
              this.$data[name][rowindex].occupied = true
              this.$data[name][rowindex].color = this.classList[startChildIndex].color
              this.$data[name][rowindex].duration = duration
              this.$data[name].push('')
              this.$data[name].splice( -1,1)
              // add hours to global
              var start = this.oindex + rowindex
              var end = this.oindex + rowindex + duration
              var index1 = this.classList.map(function(e){return e._id}).indexOf(this.classList[startChildIndex]._id)
              var index2 = this.classList[index1].hours.map(function(e){return e.day}).indexOf((columnindex + 1)%7)
              this.classList[index1].hours[index2].hours.push({start:start,end:end})
              for (var i = 1; i < duration ;i ++){
                // this.$data[name][rowindex + i].class = this.classList[startChildIndex]
                this.$data[name][rowindex + i].first = false
                this.$data[name][rowindex + i].occupied = true
              }
      }else if(startGroupIndex == 1 && endGroupIndex != 0){
        return
      }else if(startGroupIndex == 2 && endGroupIndex == 0){//选教工
          // this.day1[rowindex].class = startGroupIndex
          if (this.classList[endChildIndex].teacher == undefined){
            this.classList[endChildIndex].teacher = this.staffList[startChildIndex]
                  this.classList.push('')
      this.classList.splice( -1,1)
          }
          else if (this.classList[endChildIndex].registrar == undefined){
            this.classList[endChildIndex].registrar = this.staffList[startChildIndex]
                  this.classList.push('')
      this.classList.splice( -1,1)
          }
          else{
            alert('该时间已经有老师了，请先取消')
          }
      }else if(startGroupIndex ==2 && endGroupIndex == 1){//班级选教师
        if (this.classList[endChildIndex].teacher == undefined){
          this.classList[endChildIndex].teacher = this.staffList[startChildIndex]
          this.classList.push('')
          this.classList.splice( -1,1)
        }else if (this.classList[endChildIndex].registrar == undefined){
          this.classList[endChildIndex].registrar = this.staffList[startChildIndex]
          this.classList.push('')
          this.classList.splice( -1,1)
        }else{
          alert('该时间已经有老师了，请先取消')
        }
      }
    },
    onDrop(event) {
      this.endIndex = event.target.getAttribute("data-id");
      // console.log('endindex',this.endIndex,'onDrop')
    },
    onDragover(event) {
      event.preventDefault();
    },
    empty(event){
      var startChildIndex = event.target.getAttribute("data-id").split("-")[1];
      let arrayIndex = parseInt(startChildIndex.split('_')[1])
      startChildIndex = parseInt(startChildIndex.split('_')[0])
      let rowindex = Math.floor(startChildIndex / 7)
      let columnindex = startChildIndex % 7
      var name = 'day' + (columnindex + 1)
      this.showAdd = true
      this.thisDay = name
      this.thisHour = rowindex
      this.thisColumnIndex = columnindex
      // show class list
    },

    addClass(row){
      if (this.selectedClassroom == {}){
          alert('请先选择教室')
          return
        }
        let rowindex = this.thisHour
        
          if (row.teacher == undefined){
            alert('请先添加班级老师')
            return 
          }
          // if (row.registrar == undefined){
          //   alert('请先添加班级教务')
          //   return 
          // }

          let theday = this.$data[this.thisDay]
          let duration = row.course.duration
          // check if same classroom is used , same teacher 
          // console.log(theday,'dsadas') //theday[rowindex] -> which hour has classes
          if (theday[rowindex].class != undefined){
            if (theday[rowindex].class.map(function(e){return e.class != undefined ? e.class._id : ''}).indexOf(row._id) != -1){
              alert('已经添加了这个课程')
              return 
            }
            var good = true
            for (var i = 0; i < duration;i++){
              if (theday[rowindex+i].occupied){
                good = false
              }
            }
            if (theday[rowindex].class.map(function(e){return e.teacher != undefined ? e.teacher._id : ''}).indexOf(row.teacher._id) != -1){
              alert('同一个老师不能同时多节课')
              return 
            }
          
            // if (theday[rowindex].class.map(function(e){return e.registrar != undefined ? e.registrar._id : ''}).indexOf(row.registrar._id) != -1){
            //   alert('同一个教务不能同时多节课')
            //   return 
            // }
          }
            for (var i = 0; i < duration;i++){
              if (theday[rowindex+i].occupied == true){
                alert('该时段教室已被占用')
                return
              }
            }
          if (theday[rowindex].class == undefined){
              theday[rowindex].class = [row]
            }else{
              // this.$data[name][rowindex].class.push(this.classList[startChildIndex])
              alert('该时段教室已被占用')
              return
            }
              theday[rowindex].first = true
              theday[rowindex].occupied = true
              theday[rowindex].color = row.color
              theday[rowindex].duration = duration
              theday.push('')
              theday.splice( -1,1)
              // add hours to global
              var start = this.oindex + rowindex
              var end = this.oindex + rowindex + duration
              var index1 = this.classList.map(function(e){return e._id}).indexOf(row._id)
              var index2 = this.classList[index1].hours.map(function(e){return e.day}).indexOf((this.thisColumnIndex + 1)%7)
              this.classList[index1].hours[index2].hours.push({start:start,end:end})
              for (var i = 1; i < duration ;i ++){
                // this.$data[name][rowindex + i].class = this.classList[startChildIndex]
                theday[rowindex + i].first = false
                theday[rowindex + i].occupied = true
              }
              this.$data[this.thisDay] = theday

              this.thisDay = ''
              this.thisColumnIndex = undefined
              this.thisHour = ''


    },

    removeClass(event){
      var startChildIndex = event.target.getAttribute("data-id").split("-")[1];
      let arrayIndex = parseInt(startChildIndex.split('_')[1])

      startChildIndex = parseInt(startChildIndex.split('_')[0])
      let rowindex = Math.floor(startChildIndex / 7)
      let columnindex = startChildIndex % 7
      var name = 'day' + (columnindex + 1)
      var index = this.classList.map(function(e){return e._id}).indexOf(this.$data[name][rowindex].class[arrayIndex]._id)
      var index2 = this.classList[index].hours.map(function(e){return e.day}).indexOf((columnindex+1)%7)
      var index3 = this.classList[index].hours[index2].hours.map(function(e){return e.start}).indexOf(rowindex + this.oindex)
      var duration = this.classList[index].course.duration
      if (index3 != -1){
        this.classList[index].hours[index2].hours.splice(index3,1) // remove hours 
      }

      // remove display
      if (this.$data[name][rowindex].class.length == 1){
        for (var  i= 0 ;i < duration ; i++){
          this.$data[name][rowindex + i] = {}
          this.$data[name].push('')
          this.$data[name].splice(- 1,1)
        }
              // this.$data[name][rowindex] = {}

      }
      else{
          this.$data[name][rowindex].class.splice(arrayIndex,1)
          // check duration , clear empty slots
          this.$data[name].push({})
          this.$data[name].splice(-1,1)


      }

      this.classList.push('')
      this.classList.splice(-1,1)    


    },


    removeTeacher(event){
      // let startChildIndex = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      // let rowindex = Math.floor(startChildIndex / 7)
      // let columnindex = startChildIndex % 7
      // var name = 'day' + (columnindex + 1)
      // var duration = 2
      let index = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      this.classList[index].teacher = undefined
      this.classList.push('')
      this.classList.splice(-1,1)
       // this.$data[name][rowindex].class.teacher = undefined
      
      // this.$data[name].push('')
      // this.$data[name].splice(this.$data[name].length -1,1)     


    },


    removeRegistrar(event){

      let index =parseInt(event.target.getAttribute("data-id").split("-")[1]);
      this.classList[index].registrar = undefined
      this.classList.push('')
      this.classList.splice(-1,1)

      // let startChildIndex = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      // let rowindex = Math.floor(startChildIndex / 7)
      // let columnindex = startChildIndex % 7
      // var name = 'day' + (columnindex + 1)

      //  this.$data[name][rowindex].class.registrar = undefined

      // this.$data[name].push('')
      // this.$data[name].splice(this.$data[name].length -1,1)     


    },
    
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      var colspan = 1
      var rowspan = 1
      var newRowIndex = rowIndex  
      var newColumnIndex = columnIndex - 1
      // column start from 1
      if ((newRowIndex >= 0) && (newColumnIndex <= 6) && (newColumnIndex >= 0) && (newRowIndex < 25)){
        var day = 'day' + (newColumnIndex + 1)
        // console.log(day)
        if (this.$data[day][newRowIndex ].occupied){
          rowspan = 0
        }
        if (this.$data[day][newRowIndex].first){
          // console.log(this.$data[day][newRowIndex])
          // console.log(this.$data[day][newRowIndex].map(function(e){return e.duration}),'ddsds')
          // rowspan = this.$data[day][newRowIndex].duration
          rowspan = Math.max.apply(Math,this.$data[day][newRowIndex].class.map(function(e){return e.course.duration}))

        }
      }

      return {
        rowspan : rowspan,
        colspan : 1
      }

    },

    cellStyle({row, column, rowIndex, columnIndex}){
            var newColumnIndex = columnIndex - 1
            var day = 'day' + (newColumnIndex + 1)
            var newRowIndex = rowIndex  

            if ((newRowIndex >= 0) && (newColumnIndex <= 6) && (newColumnIndex >= 0) && (newRowIndex < 24)){

              if (this.$data[day][rowIndex].color){
                  if (this.$data[day][rowIndex].class != undefined){
                    if (this.$data[day][rowIndex].class.length == 1){
                      return {
                        background :this.$data[day][rowIndex].class[0].color
                    }
                  }
                  
                }
            }
          }
          return {}
              
    },
    classRoomSchedule(){
      this.$router.push({ path: "/classroom-use-detail"});
    },
    exportExcel(){
      let columns = [{label:'时间/日期',prop:'date'},{label:'周一',prop:'day1'},{label:'周二',prop:'day2'},{label:'周三',prop:'day3'},{label:'周四',prop:'day4'},{label:'周五',prop:'day5'},{label:'周六',prop:'day6'},{label:'周日',prop:'day7'}]
      let data = []
      for(let i=0;i<this.dayList.length;i++){
        let temp = {}
        temp.date = this.dayList[i].hour
        if(this.day1[i].class != undefined){
          temp.day1 = this.day1[i].class[0].name
        }
        if(this.day2[i].class != undefined){
          temp.day2 = this.day2[i].class[0].name
        }
        if(this.day3[i].class != undefined){
          temp.day3 = this.day3[i].class[0].name
        }

        if(this.day4[i].class != undefined){
          temp.day4 = this.day4[i].class[0].name
        }
        if(this.day5[i].class != undefined){
          temp.day5 = this.day5[i].class[0].name
        }
        if(this.day6[i].class != undefined){
          temp.day6 = this.day6[i].class[0].name
        }
        if(this.day7[i].class != undefined){
          temp.day7 = this.day7[i].class[0].name
        }
        data.push(temp)
      }
      excel.export(columns,data,this.selectedClassroom.name)
      
    },
    // createColor(length){
    //   // this.testColor=[]
    //   let times = 0
    //   for(let i=0;times<length;i++){
    //     var r = Math.floor(Math.random()*256);
    //     var g = Math.floor(Math.random()*256);
    //     var b = Math.floor(Math.random()*256);
    //     var color = '('+r+','+g+','+b+')';
    //     // var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
    //     if(this.testColor.indexOf(color)==-1){
    //       this.testColor.push(color)
    //       times += 1
    //     }
    //   }
    //   console.log(length,this.testColor)
    // }
  },
  created() {
    this.getClassroomList();
    this.getStaffList();
    this.getClassList()
  }
};
</script>

<style>
</style>